import React, { FC } from 'react'
import { NavBar, TabBar } from 'antd-mobile'
import './home.less'
import Shouye from './shouye/shouye'
import Search from './search/search'
import Order from './order/order'
import My from './my/my'
import {
  Route,
  Switch,
  useHistory,
  useLocation,
  MemoryRouter as Router,
} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
    UserOutline,
    FileOutline
} from 'antd-mobile-icons'
const Bottom: FC = () => {
    const history = useHistory()
    const location = useLocation()
    const { pathname } = location
  
    const setRouteActive = (value: string) => {
      history.push(value)
    }
  
    const tabs = [
      {
        key: '/',
        title: '外卖',
        icon: <AppOutline />,
      },
      {
        key: '/search',
        title: '搜索',
        icon: <UnorderedListOutline />,
      },
      {
        key: '/order',
        title: '订单',
        icon: <FileOutline />,
      },
      {
        key: '/my',
        title: '我的',
        icon: <UserOutline />,
      },
    ]
  
    return (
      <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    )
  }
  
  export default () => {
    return (
      <Router initialEntries={['/']}>
        <div className='app'>
          <div className='body'>
            <Switch>
              <Route  exact path='/'>
                <Shouye />
              </Route>
              <Route exact path='/search'>
                <Search />
              </Route>
              <Route exact path='/order'>
                <Order />
              </Route>
              <Route exact path='/my'>
                <My />
              </Route>
            </Switch>
          </div>
          <div className='bottom'>
            <Bottom />
          </div>
        </div>
      </Router>
    )
}


